import { createBrowserRouter } from 'react-router-dom';
import App from '@/App.tsx';
import ErrorPage from '@/views/error-page.tsx';
import Color from '@/views/color/color.tsx';
import Home from '@/views/Home/Home.tsx';
import Theme from '@/views/theme/Theme.tsx';
import Root, { loader as rootLoader } from '@/views/tutorial/root.tsx';
import Contact, { getId } from '@/views/tutorial/contact.tsx';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,  // Layout
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'home',
        element: <Home />,
      },
      {
        path: 'color',
        element: <Color />,
      },
      {
        path: 'theme',
        element: <Theme />,
      },
    ],
  },
  {
    path: '/tutorial',
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: 'contacts/:contactId',
        element: <Contact />,
        loader: getId,
      },
    ],
  },
]);

export default router;
